<script lang="ts" setup>

    defineProps<{
        title: string,
        show: boolean
    }>();

</script>
<template>
<div class="x-dialog" v-if="show">
    <div class="x-dialog-title">{{title}}</div>
    <div class="x-dialog-body"><slot></slot></div>
    <div class="x-dialog-footer">
        <button class="x-dialog-ok x-button" @click="$emit('ok')">确认</button>
    </div>
</div>
</template>
<style scoped lang="less">

.x-dialog {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.5em;
    color: #fff;
    padding: 1em;
    width: 500px;
    height: 300px;
    display: flex;
    flex-direction: column;

    .x-dialog-title {
        text-align: left;
        border-bottom: 1px solid #aaa;
        margin-top: -1em;
        padding: 1em;
        line-height: 1em;
        font-size: large;
    }
    .x-dialog-body {
        padding: 0.5em;
        flex:1;
    }
    .x-dialog-footer {
        margin: 5px;
        text-align: center;
    }
}
</style>